<template>
  <div class="obody">
    <!-- 其他内容布局 -->
    <button class="btn" @click="router.back()">🡠</button>
    <p>欢迎回来</p>
    <!-- 表单 -->
    <van-cell-group inset>
      <van-field v-model="value1" left-icon="search" placeholder="Email" />
      <van-field type="password" v-model="value2" left-icon="shield-o" placeholder="密码" />
    </van-cell-group>
    <div class="forget">忘记密码</div>
    <van-button type="primary" size="large" color="#6c5dd3" @click="login()">登录</van-button>
    <div class="txt">以下方式登录</div>
    <div class="imgs">
      <img src="./imgs/qq.png" />
      <img src="./imgs/微信.png" />
      <img src="./imgs/微博.png" />
      <img src="./imgs/苹果账号.png" />
    </div>
  </div>
</template>

<script setup>
import http from '@/utils/http'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { showSuccessToast } from 'vant'
const value1 = ref('') // 用于存储 email
const value2 = ref('') // 用于存储密码
const router = useRouter() // Vue Router 实例

function login() {
  http({
    url: '/user/login',
    method: 'post',
    data: {
      phone: value1.value,
      password: value2.value,
    },
  })
    .then((r) => {
      console.log(r.data)
      if (r.data.code === 200) {
        console.log(JSON.stringify(r.data))
        localStorage.setItem('Token', r.data.data)
        showSuccessToast('登录成功')
        router.push('/home')
      } else {
        console.error('登录失败:')
      }
    })
    .catch((error) => {
      console.error('登录请求发生错误:', error)
    })
}
</script>

<style scoped>
.obody {
  padding: 70px 30px 0;
}
.btn {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: transparent;
  border: none;
  cursor: help;
}
p {
  font-size: 25px;
  margin: 10px 0 30px;
}
.van-field {
  border: 1px solid #cecece;
  background-color: #f6f7f8;
  margin-top: 10px;
}
.van-button {
  margin-top: 30px;
  border-radius: 15px;
}
.txt {
  text-align: center;
  font-size: 14px;
  color: #777;
  margin-top: 130px;
}
.imgs {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.imgs > img {
  width: 40px;
  margin: 10px 18px 0;
}
.forget {
  text-align: right;
  margin: 15px 20px 0 0;
}
</style>
